$playerBarBackground: #000;
$playerBarFontColor: #fff;
$playerBarFontColor2: #c4c4c4;
$centerWidth:300px;
#playerBar {
  width: 100%;
  height: 60px;
  background: $playerBarBackground;
  position: fixed;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  #left {
    flex: 0 1 50px;
    justify-content: flex-start;
    //封面图片是否显示
    @media screen and (max-width: 345px) {
      display: none;
      flex: none;
    }
  }
  #coverImg {
    width: 50px;
    height: 50px;
    border-radius: 5px;
    cursor: pointer;
  }
  #center {
    flex: 1 1 $centerWidth;
    #songInfo {
      text-align: start;
      color: $playerBarFontColor;
      flex: 0 0 32px;
      h1 {
        flex: 1 1 18px;
        position: absolute;
        top: 0px;
        left: 54px;
        font-size: 14px;
        line-height: 18px;
        max-width: 150px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      h2 {
        flex: 1 1 14px;
        position: absolute;
        top: 18px;
        left: 54px;
        font-size: 10px;
        line-height: 14px;
        max-width: 140px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: $playerBarFontColor2;
      }
    }
    #control {
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
      position: absolute;
      top: 0px;
      left: 54px;
      // background-color: red;
      overflow: hidden;
      width: 200px;
      padding-right: 10px;
      flex-direction: column;
      p {
        font-size: 14px;
        color: $playerBarFontColor;
        flex: 1 1 14px;
      }
      #curTime {
        top: 4px;
        left: 200px;
        order: -2;
        line-height: 18px;
      }
      #maxTime {
        top: 20px;
        left: 200px;
        color: $playerBarFontColor2;
        order: -1;
        line-height: 14px;
      }
      div {
        flex: 1 1 28px;
        width: 180px;
        height: 28px;
        margin-top: -2px;
      }
    }
    //歌曲信息挤到最左边，这里的适配很少用到，几乎没有这样的设备
    @media screen and (max-width: 345px) {
      #songInfo {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        h1 {
          margin-top: -30px;
          position: static;
        }
        h2 {
          position: static;
        }
      }
      #control {
        left: 4px;
      }
    }
    //歌曲信息显示/隐藏
    @media screen and (max-width: 290px) {
      display: none;
    }
  }
  #controlBtns {
    display: flex;
    flex: 0 1 160px;
    justify-content: space-between;
    img {
      cursor: pointer;
    }
    //是否显示加速/减速 按钮
    @media screen and (max-width: 399px) {
      justify-content: flex-end;
      padding-right: 6px;
      img {
        &:first-child {
          display: none;
        }
        &:last-child {
          display: none;
        }
      }
    }
  }
  #otherBtns {
    display: flex;
    flex: 1 1 40px;
    justify-content: center;
    img {
      cursor: pointer;
    }
  }
}